<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false" @on-click="clickTabs">
				<TabPane label="维修师列表" name="maintenance">
					<div style="margin-bottom:10px;">
						<Select style="width:200px" v-model="maintenance.maintenanceParams.isAudit">
							<Option :value="0">待审核</Option>
							<Option :value="1">已审核</Option>
							<Option :value="2">未通过</Option>
						</Select>
						<Button @click="queryMaintenance" type="primary">查询</Button>
					</div>

					<Table border :columns="maintenance.maintenancetableCol" :data="maintenance.dataMaintenance" :loading="maintenance.loadingMaintenance"></Table>
					<div style="margin: 10px;overflow: hidden">

						<div style="float: right;">
							<Page :total="maintenance.totalMaintenance" :current="1" show-sizer show-total transfer @on-change="changeMainPage"
							 @on-page-size-change="changeMainSizePage"></Page>
						</div>
					</div>
				</TabPane>

				<TabPane label="机手列表" name="driver">
					<div style="margin-bottom:10px;">
						<Select style="width:200px" v-model="driver.driverParams.isAudit">
							<Option :value="0">待审核</Option>
							<Option :value="1">已审核</Option>
							<Option :value="2">未通过</Option>
						</Select>
						<Button @click="queryDriverList" type="primary">查询</Button>
					</div>
					<Table border :columns="driver.drivertableCol" :data="driver.dataDriver" :loading="driver.loadingDriver"></Table>
					<div style="margin: 10px;overflow: hidden">
						<div style="float: right;">
							<Page :total="driver.totalDriver" :current="1" show-sizer show-total transfer @on-change="changeDriverPage"
							 @on-page-size-change="changeDriverSizePage"></Page>
						</div>
					</div>
				</TabPane>
			</Tabs>
		</Card>
		<maintenace-ope ref="maintenaceOpe" @table='queryMaintenance()'></maintenace-ope>
		<authen-ope ref="authenOpe" :type="modalType" @table='queryMaintenance()'></authen-ope>
	</div>
</template>

<script>
	import tableView from '../../components/table'
	import {
		formatDate
	} from '../utils/time.js'
	import maintenaceOpe from './maintenaceOpe'
	import authenOpe from './authenOpe'
	export default {
		components: {
			tableView,
			maintenaceOpe,
			authenOpe
		},
		data() {
			return {
				modalType: 0,
				//tab点击之后的名称
				tabsName: 'maintenance',
				maintenance: {
					maintenanceParams: {
						roleId: 3,
						pageNo: '1',
						pageSize: '10',
						isAudit: ''
					},
					totalMaintenance: 0,
					loadingMaintenance: false,
					catTypeList: [],
					mGenderList: {
						0: '保密',
						1: '男',
						2: '女'
					},
					mIsAuthen: {
						0: '待审核',
						1: '已审核',
						2: '已拒绝'
					},
					maintenancetableCol: [{
							title: '序号',
							type: 'index',
							width: 70
						}, {
							title: '姓名',
							key: 'realName',
							minWidth: 180

						}, {
							title: '性别',
							minWidth: 80,
							render: (h, params) => {
								return h('div', this.maintenance.mGenderList[params.row.gender])
							}
						}, {
							title: '身高（米）',
							minWidth: 80,
							key: 'height'
						}, {
							title: '体重（kg）',
							minWidth: 80,
							key: 'weight'
						}, {
							title: '年龄(岁)',
							minWidth: 80,
							key: 'age'
						}, {
							title: '维修范围',
							minWidth: 120,
							render: (h, params) => {
								return h('div', params.row.details.scope)
							}
						}, {
							title: '手机号',
							key: 'userTel',
							minWidth: 150
						}, {
							title: '地址',
							minWidth: 80,
							key: 'address'
						}, {
							title: '审核状态',
							minWidth: 120,
							key: 'createTime',
							render: (h, params) => {
								return h('div', this.maintenance.mIsAuthen[params.row.userRole.isAudit])
							}
						}, {
							title: '认证时间',
							minWidth: 120,
							key: 'createTime',
							render: (h, params) => {
								return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
							}
						}, {
							title: '操作',
							key: 'action',
							minWidth: 200,
							render: (h, params) => {
								if (params.row.userRole.isAudit == 0) {
									return h('div', [
										h('Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginLeft: '10px'
											},
											on: {
												click: () => {
													this.$refs['maintenaceOpe'].show(params)
												}
											}
										}, '查看'),

										h('Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginLeft: '10px'
											},
											on: {
												click: () => {
													this.modalType = 3
													this.$refs['authenOpe'].show(params)
												}
											}
										}, '审核'),
									])
								} else {
									return h('div', [
										h('Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginLeft: '10px'
											},
											on: {
												click: () => {
													this.$refs['maintenaceOpe'].show(params)
												}
											}
										}, '查看'),
									])
								}
							}
						}

					],
					dataMaintenance: [],
					modalType: ''
				},
				driver: {
					driverParams: {
						roleId: 4,
						pageNo: '1',
						pageSize: '10',
						isAudit: ''
					},
					totalDriver: 0,
					loadingDriver: false,
					catTypeList: [],
					dGenderList: {
						0: '保密',
						1: '男',
						2: '女'
					},
					drivertableCol: [{
							title: '序号',
							type: 'index',
							width: 70
						}, {
							title: '姓名',
							key: 'realName',
							minWidth: 180

						}, {
							title: '性别',
							minWidth: 80,
							render: (h, params) => {
								return h('div', this.driver.dGenderList[params.row.gender])
							}
						}, {
							title: '身高（米）',
							minWidth: 80,
							key: 'height'
						}, {
							title: '体重（kg）',
							minWidth: 80,
							key: 'weight'
						}, {
							title: '年龄(岁)',
							minWidth: 80,
							key: 'age'
						}, {
							title: '设备信息',
							minWidth: 120,
							render: (h, params) => {
								return h('div', params.row.machinistList.map(v => { // 遍历后台params.row.machinistList
									return h('div', v.typeName + "：" + v.years + "年")

								}))
							}
						}, {
							title: '手机号',
							key: 'userTel',
							minWidth: 150
						}, {
							title: '地址',
							minWidth: 80,
							key: 'address'
						}, {
							title: '认证时间',
							minWidth: 80,
							key: 'createTime',
							render: (h, params) => {
								return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
							}
						}, {
							title: '操作',
							key: 'action',
							minWidth: 200,
							render: (h, params) => {
								if (params.row.userRole.isAudit == 0) {
									return h('div', [
										h('Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginLeft: '10px'
											},
											on: {
												click: () => {
													this.$refs['maintenaceOpe'].show(params)
												}
											}
										}, '查看'),
								
										h('Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginLeft: '10px'
											},
											on: {
												click: () => {
													this.modalType = 4
													this.$refs['authenOpe'].show(params)
												}
											}
										}, '审核'),
									])
								} else {
									return h('div', [
										h('Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginLeft: '10px'
											},
											on: {
												click: () => {
													this.$refs['maintenaceOpe'].show(params)
												}
											}
										}, '查看'),
									])
								}
							}
						}

					],
					dataDriver: [],
					modalType: ''
				}


			}
		},
		mounted() {
			this.queryMaintenanceList();
		},
		methods: {
			queryMaintenance() {
				this.queryMaintenanceList()
			},
			// 查询维修师列表
			queryMaintenanceList() {
				this.$http.post('/userrole/list', this.maintenance.maintenanceParams).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.maintenance.totalMaintenance = res.data.data.total;
							this.maintenance.dataMaintenance = res.data.data.rows;
						}
					}
				});
			},
			queryDriverList() {
				this.$http.post('/userrole/list', this.driver.driverParams).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.driver.totalDriver = res.data.data.total;
							this.driver.dataDriver = res.data.data.rows;
						}
					}
				});
			},
			refreshData() {
				this.$refs['tableView'].getData()
			},
			operationDone() {
				this.$refs['tableView'].getData()
			},
			// 点击Tabs
			clickTabs(res) {
				this.tabsName = res;
				// 判断点击的标签
				switch (res) {
					case 'maintenance':
						// 查询维修师列表
						this.queryMaintenanceList();
						break;
					case 'driver':
						// 查询机手列表
						this.queryDriverList();
						break;
				}
			},
			// 改变待审核当前页
			changeMainPage(res) {
				this.maintenance.maintenanceParams.pageNo = res;
				this.queryMaintenanceList();
			},
			// 改变待审核当前页容量
			changeMainSizePage(res) {
				this.maintenance.maintenanceParams.pageSize = res;
				this.queryMaintenanceList();
			},
			// 改变待审核当前页
			changeDriverPage(res) {
				this.driver.driverParams.pageNo = res;
				this.queryDriverList();
			},
			// 改变待审核当前页容量
			changeDriverSizePage(res) {
				this.driver.driverParams.pageSize = res;
				this.queryDriverList();
			},
		}
	}
</script>

<style>
</style>
